<template>
  <div class="page">
    <el-page-header @back="goBack" content="通知公告详情">
    </el-page-header>
    <div class="font-setting">
      <div>【字体：</div>
      <el-link :type="fontSize == 24 ? 'warning' : 'default'" @click="setFont(24)">大</el-link>
      <el-link :type="fontSize == 18 ? 'warning' : 'default'" @click="setFont(18)">中</el-link>
      <el-link :type="fontSize == 12 ? 'warning' : 'default'" @click="setFont(12)">小</el-link>】
    </div>
    <h3>{{ formData.title }}</h3>
    <div>
      <div>{{ formData.subType }}</div>
      <div>{{ formData.createTime }}</div>
    </div>
    <hr>
    <div v-html="formData.content" class="article" :style="{fontSize: fontSize+'px'}">

    </div>
  </div>
</template>

<script>
import { SelectList } from '@/api/admin/article'
export default {
  props: ['id'],
  data() {
    return {
      formData: {
        title: '',
        createTime: '',
        subType: '',
        content: ''
      },
      fontSize: 18
    }
  },
  mounted () {
    if (this.id) {
      this.loadData()
    }
  },
  methods: {
    setFont (size) {
      this.fontSize = size
    },
    goBack () {
      this.$router.go(-1)
    },
    loadData() {
      SelectList({ id: this.id }).then((res) => {
        if (res.code === 20000 && res.data && res.data.length > 0) {
          this.formData = res.data[0]
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  background-color: #fff;
  padding: 30px 50px;
  min-height: 100vh;
  box-sizing: border-box;
  .font-setting {
    position: absolute;
    right: 40px;
    top: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .article {
    text-align: left;
  }
}
</style>